<script setup>
import {RouterLink, RouterView, useRoute} from 'vue-router'
import Hearder from '@/components/layout/Header.vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import '@fortawesome/fontawesome-svg-core/styles.css'

const route = useRoute()
const showHeader = () => {
  return route.fullPath !== '/user/login';
}

</script>

<template>
  <el-container class="all-container">
    <el-header v-show="showHeader()">
      <Hearder></Hearder>
    </el-header>
    <el-main class="main-content">
      <router-view v-slot="{ Component }" :key="$route.fullPath">
        <transition name="animation" mode="out-in">
          <component :is="Component"/>
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
.all-container {
  height: 100vh
}

.main-content {
  padding: 0;
  height: calc(100% - 60px);
  overflow: hidden;
}

.el-header {
  border-bottom: 1px solid var(--color-border);
  --el-header-height: auto !important;
}

/* 过度动画配置代码 */
.animation-enter-from,
.animation-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.animation-enter-to,
.animation-leave-from {
  opacity: 1;
}

.animation-enter-active {
  transition: all 0.7s ease;
}

.animation-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>